<!--
 * @Description: 行业列表
 * @version: 电子名片2.0
 * @Author: 付小清
 * @Date: 2020-11-23 10:22:22
 * @LastEditors: 付小清
 * @LastEditTime: 2020-12-21 17:30:23
-->

<template>
  <div class="no-padding">
    <el-container class="boxHeight">
      <el-aside width="300px">
        <el-tree
          ref="refTree"
          :data="treeData"
          :props="defaultProps"
          :default-expanded-keys="['0']"
          node-key="industryId"
          :load="loadNode"
          highlight-current
          lazy
          @node-click="handleNodeClick"
          @node-expand="loadNode"
        />
      </el-aside>
      <el-main>
        <adminTable
          ref="refTable"
          :form-inline="formInline"
          :api-fun="apiFun"
          :reset-fun="resetFun"
          :table-column="tableColumn"
          :table-data.sync="tableData"
        >
          <!-- 搜索 -->
          <template slot="search">
            <el-form-item>
              <el-input
                v-model="formInline.keyword"
                clearable
                placeholder="行业编码、名称"
              />
            </el-form-item>
          </template>
          <el-form-item slot="button">
            <el-button type="success" @click="addClick">添加</el-button>
          </el-form-item>
          <template slot="modifierName" slot-scope="scope">
            <span>{{ scope.value.modifierName }}</span>
          </template>
          <!-- 表格操作 -->
          <template slot="operate" slot-scope="scope">
            <el-button type="text" size="small" @click="editClick(scope.value)">
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="deleteClick(scope.value)"
            >
              删除
            </el-button>
          </template>
        </adminTable>
      </el-main>
    </el-container>
    <!--  添加,编辑行政区域 -->
    <BusinessAddEdit
      :show.sync="dialogFormVisible"
      :form-data.sync="formData"
      @refresh="refreshList"
    />
  </div>
</template>

<script>
// 组件引入
import adminTable from '@/components/admin/admin-table'
import BusinessAddEdit from './components/BusinessAddEdit'
// 接口
import { industryDelete, industryList, industryTree } from '@/api/basics'
// 页面配置
import { BusinessClumen } from '@/views/basics/count'
// 公共方法
import { openMessageBox } from '@/utils/utils'
export default {
  components: {
    adminTable,
    BusinessAddEdit
  },
  data() {
    return {
      tableColumn: BusinessClumen,
      tableData: [],
      formInline: {
        keyword: '',
        sup: '0'
      },
      apiFun: industryList,
      dialogFormVisible: false,
      formData: {
        genre: 'add', // add或者edit
        industryId: '',
        industryName: '',
        levelType: 0,
        parentId: '',
        sortOrder: 0
      },
      treeData: [],
      defaultProps: {
        label: 'industryName',
        children: 'zones',
        isLeaf: 'leaf'
      },
      parentCode: []
    }
  },
  methods: {
    // 点击目录请求接口
    handleNodeClick(data) {
      this.formInline.sup = data.industryId
      this.$refs.refTable.getList()
    },
    // 重新构建重置内容
    resetFun() {
      this.formInline.keyword = ''
      this.formInline.parentId = '0'
      return true
    },
    // tree 根据子级查询父级code
    parentId(code) {
      if (code !== '0') {
        const parentCode = this.$refs.refTree.getNode(code).parent.data.industryId
        if (parentCode !== '0') {
          this.parentCode.unshift(parentCode)
          this.parentId(parentCode)
        }
      }
    },
    // 编辑设置表单数据
    editClick(row) {
      // 获取父级id
      this.parentCode = []
      this.parentId(this.formInline.sup)
      this.parentCode.push(this.formInline.sup)
      // 显示弹窗,将数据写入
      this.dialogFormVisible = true
      this.formData = {
        genre: 'edit',
        ...row,
        parentId: this.parentCode
      }
    },
    // 添加清空表单数据
    addClick() {
      this.dialogFormVisible = true
      this.formData = {
        genre: 'add',
        industryId: '',
        industryName: '',
        levelType: 0,
        parentId: '',
        sortOrder: 0
      }
    },
    // 删除点击弹出提示
    deleteClick(row) {
      openMessageBox({
        content: '删除数据后，将不可恢复，是否确认？',
        title: '删除数据'
      }, (boole) => {
        if (boole) {
          // 删除行政区域接口请求
          industryDelete({ id: row.industryId }).then(async(res) => {
            this.$message({ message: '删除成功', type: 'success' })
            // 从新请求上级接口
            this.refreshList(row.parentId)
          })
        }
      })
    },
    // 异步树叶子节点懒加载逻辑
    loadNode(node, resolve) {
      // 一级节点处理
      if (node.level === 0) {
        resolve([
          { industryId: '0', industryName: '全部', sortOrder: 1 }
        ])
      }
      // 其余节点处理
      if (node.level >= 1) {
        // 注意！把resolve传到你自己的异步中去
        this.updateTree(node.data.industryId, resolve)
      }
    },
    // 异步加载叶子节点数据函数
    async updateTree(code, resolve) {
      try {
        const { data } = await industryTree({ sup: code })
        console.log('触发加载树组件')
        const list = []
        data.filter((item) => {
          // 最后不显示展开节点
          // if (item.industryId.length > 6) {
          //   list.push({
          //     ...item,
          //     leaf: true
          //   })
          // } else {
          //   list.push(item)
          // }
          list.push(item)
        })
        if (resolve) {
          // 普通的异步加载返回数据
          resolve(list)
        } else {
          // 更新目录树节点
          this.$refs.refTree.updateKeyChildren(code, list)
        }
      } catch (e) {
        console.log(e)
      }
    },
    // 刷新列表
    refreshList(pid) {
      // if (this.formInline.sup === 'HY0000000034') {
      //   this.updateTree(0)
      //   console.log('根')
      // } else {
      //   this.updateTree(this.formInline.sup)
      //   console.log('子')
      // }
      console.log(pid)
      this.updateTree(pid)
      this.$refs.refTable.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree {
  background: none;
}
aside {
  margin-bottom: 0;
}
.boxHeight {
  height: (100vh-18);
}
</style>
